div(ng-switch="vm.toShow")

	// Add group
	#groupsAdd(ng-switch-when="showAdd" layout-margin)
		div(layout="column")
			h4#addGroupTitle Add a new group
			md-input-container.md-block(md-no-float="")
				input(placeholder="Name", ng-model="vm.name")
			div(layout="row")
				#groupColour(style="background:{{vm.colourToString(vm.colourPickerColour)}}")
				tdr-colour-picker(title="Change Colour" on-colour-change="vm.colourPickerChange(colour)" offset="10 -20")
			div(layout="row" layout-align="start")
				md-button.md-raised.md-accent#groupsSave(ng-click="vm.saveGroup()", ng-disabled="vm.saveDisabled") Save

	// Groups list
	#groupsList(ng-switch-when="showGroups")
		md-list
			md-list-item(ng-repeat="group in vm.groups", layout-fill)
				.group(layout="row" layout-align="start", flex, ng-click="vm.showGroup($index)", md-ink-ripple, layout-fill)
					.groupColourBar(flex="none", style="background:{{vm.colourToString(group.color)}}")
					div(flex, layout="column")
						div(layout="row", layout-align="start center", flex)
							p {{group.name}}
						md-divider

	// Group
	#groupsGroup(ng-switch-when="showGroup" layout="column")
		#groupHeader(layout="row" layout-align="start" flex)
			.groupColourBar(flex="none", style="background:{{vm.colourToString(vm.selectedGroup.color)}}")
			div(flex)
				p {{vm.selectedGroup.name}}
		div(layout="row" layout-align="start center" flex)
			md-switch(ng-model="vm.editingGroup" aria-label="Edit group" flex="30") {{vm.editingText}}
			tdr-colour-picker(
				title="Change Colour"
				on-colour-change="vm.colourPickerChange(colour)"
				offset="20 0" colour="vm.selectedGroup.color"
				flex="60")
			md-checkbox(ng-model="vm.showObjects" aria-label="Show" flex="30") Show
		#deleteGroup(layout="column" layout-align="start start")
			md-button.md-raised.md-warn#deleteGroupButton(ng-click="vm.deleteGroup()") Delete group
			p This will not delete the objects

	// Info
	#groupsInfo(ng-switch-when="showInfo" layout="column")
		.cardInfo
			p There are currently no groups

	// Loading
	div(ng-switch-when="showLoading")
		tdr-progress(info="vm.loadingInfo")
